import React, { Component,PropTypes } from 'react';
import {Link} from 'react-router';
import Split from '../../Component/CommonComponent/Split'
import Tabscontrol from '../../Component/OrderManage/Tabscontrol'
import GoodsPopup from '../../Component/OrderManage/GoodsPopup'
import IsShowEmptyImg from '../CommonComponent/IsShowEmptyImg'
import '../../Stylesheets/wx/goodsDetails.css';
import {Details,ProductAttribute,AddShopCar,OrderShopping,RemarkList,WxLogin,MyInfo} from '../../Action/auth'
import autoPlay from 'react-swipeable-views/lib/autoPlay';
import SwipeableViews from 'react-swipeable-views';
import {SCREEN_HEIGHT,GetQueryString,saveToken,loadToken,getToken} from '../../Action/rpc'
import TopShare from '../CommonComponent/TopShare'
const AutoPlaySwipeableViews = autoPlay(SwipeableViews);
import wx from 'weixin-js-sdk';
import * as URL from '../../Action/url'
import {WechatShareAuth} from '../../Action/autoLogin'
const BANNER = [{IMAGE:require('../../Images/common/intention.png')},{IMAGE:require('../../Images/common/intention.png')}]

export default class ShareGoodsDesc extends Component {
    // 构造
    constructor(props) {
        super(props);
        // 初始状态
        this.count = ''
        this.attrIds = []
        this.state = {
            isShow : false,
            //商品详情
            goodsDetails:'',
            attributeList : [],
            type:'',
            showEmptyImg:false,
            index : 0,
            remarkList:[],
            agentList:[],
            list: [],
            disabled:false,
            display:'block',
            items: [],
            height:''
        };
    }
    async componentWillMount() {
        if(loadToken()){

        }else if(GetQueryString('code')){
            await this.getShareToken()
        }
        await this.getDetails()
        //this.getProductAttribute()
        this.getRemarkList(1)
        await this.getMyInfo();
    }

    async getMyInfo(){
        await MyInfo()
            .then(res=>{
                sessionStorage.setItem('myAgent',res.AGENT_GRADE);
            })
    }

    async getShareToken(){
        await WxLogin(GetQueryString('code'))
            .then(res=>{
                const token = res.token;
                sessionStorage.setItem('openId',res.openId)
                saveToken(token)
            })
            .catch(err=>{
                alert(err)
                console.log(err)
            })
    }

    static contextTypes = {
        router:PropTypes.object
    }

    //获取评论列表
    async getRemarkList(page){
        await RemarkList(sessionStorage.getItem('orderID'),1,'')
            .then(res=>{
                this.setState({remarkList:res.resultList});
            })
    }

    //商品属性
    async getProductAttribute(){
        await ProductAttribute(sessionStorage.getItem('orderID'))
            .then(res=>{
                this.setState({attributeList:res})
            })
            .catch(err=>{
                console.warn('获取商品属性失败',err)
            })
    }

    //商品详情
    async getDetails(){
        console.log('商品详情ID',sessionStorage.getItem('orderID'))
        await Details(sessionStorage.getItem('orderID'))
            .then(res=>{
                this.setState({goodsDetails:res});
            })
            .catch(err=>{
                console.warn('err',err)
            })
    }


    //加入购物车 type = 1 加入购物车  2 立即购买
    async addShopCar(ids,count,typeParam){
        let type = typeParam?typeParam:this.state.type
        if(type==1){
            if(ids.length<this.state.attributeList.length){
                alert('请选择商品属性')
            }else{
                await AddShopCar(sessionStorage.getItem('orderID'),ids.join(','),count)
                    .then(res=>{
                        alert('添加购物车成功')
                        this.setState({isShow:false})
                    })
                    .catch(err=>{
                        console.warn('添加购物车失败',err)
                    })
            }
        }
        if(type==2){
            if(ids.length<this.state.attributeList.length){
                alert('请选择商品属性')
            }else{
                await OrderShopping(sessionStorage.getItem('orderID'),ids.join(','),count,1,sessionStorage.getItem('agentID'))
                    .then(res=>{
                        this.setState({isShow:false})
                        this.context.router.push({pathname:'/comfirmPayMoney',query:{orderId:res}})
                    })
                    .catch(err=>{
                        console.warn('立即付款失败',err)
                    })
            }
        }
    }

    async adShopCarOrToPay(type){
        await this.setState({isShow:true,type:type})
    }



    //商品介绍
    commodityIntroduction(){
        const detail = this.state.goodsDetails.CONTENT_URL_WEB
        return (
            <div className="pr">
                <iframe src={detail}  id="myiframe" overflow='auto' onLoad="$(this).css('height',$(this).contents().find('body')[0].scrollHeight)" scrolling="yes" style={{border:'none',width:'100%',height:window.innerHeight-139}}></iframe>
            </div>
        )
    }

    //商品参数
    showGoodsParams(){
        const params = this.state.goodsDetails.PARAMS
        return(
            <div className="goodsParams" style={{border:'none',width:'100%',height:window.innerHeight-139}}>
                <div style={{height:10,backgroundColor:'#f5f5f5'}} />
                <div className="tc"><img src={params} alt=""/></div>
            </div>
        )
    }


    //评价列表
    showGoodsRemark(){
        const {remarkList,showEmptyImg} = this.state
        const imgHeight = document.body.scrollWidth
        return(
            <div className="remark posr" style={{backgroundColor:'#f5f5f5',width:'100%',height:window.innerHeight-139}}>
                {
                    remarkList.length == 0?
                        <IsShowEmptyImg
                            styleSheet={{width:69,height:72}}
                            title={'暂无评论哦~'}
                        />
                        :
                    remarkList&&remarkList.map((el,index)=>{
                        return(
                            <div
                                className="remark-items f12 color9"
                                key = {index}
                            >
                                <div className="re-headImg mr">
                                    <img
                                        className="border_ra50"
                                        src={el.IMAGE_URI}
                                    />
                                </div>

                                <span>{el.MEMBER_NAME}</span>

                                <p>{el.CREATE_TIME}&nbsp;&nbsp;{el.PRODUCT_ATTR}</p>

                                <div className="flex flex-wrap color6 f14">
                                    {el.COMMENT}
                                </div>
                                <div className="flex">
                                    {

                                        el.IMAGES && el.IMAGES.length>0&&el.IMAGES[0]!=''?
                                            el.IMAGES.map(item=>{
                                                return(
                                                    <div ref='img' className="remark-img mt5" style={{height:imgHeight*27/100,marginRight:10}} >
                                                        <img  src={item}/>
                                                    </div>
                                                )
                                            })
                                            :null
                                    }
                                </div>
                                <div style={{height:60}}></div>
                            </div>
                        )
                    })
                }
            </div>

        )
    }
    render() {
        const {goodsDetails} = this.state;
        return (
            <section>
                {/*<TopShare
                    title ={'商品详情'}
                />*/}
                <div  className="bkg_color overScroll" style={{position:'absolute',top:0,bottom:60,overflowX:'hidden',overflowY:'auto',width:"100%"}}>
                    <div className="bannerImg">
                        <AutoPlaySwipeableViews
                            style={{height:180}}
                            interval = {2000}
                        >
                            {
                                goodsDetails.BANNER&&goodsDetails.BANNER.map((el,index)=>{
                                    return(
                                        <div style={{width:'100%',height:180,textAlign:'center'}}>
                                            <img
                                                src = {el.IMAGE}
                                            />
                                        </div>

                                    )
                                })
                            }
                        </AutoPlaySwipeableViews>
                    </div>
                    <div className="flex width100 goodDetails">
                        <div className="flex-1 flex flex-align-center pl10 color6 border_dec f14 height100">
                            <span className="di mr" style={{width:30,height:30}}>
                                <img src={goodsDetails.IMAGE} alt=""/>
                            </span>
                            <span>{goodsDetails.NAME}</span>
                        </div>
                    </div>
                    <div className="pl10 border_bottom">
                        <span className="colorff f12">￥</span><span className="colorff f18">{goodsDetails.CURRENT_PRICE}</span>
                    </div>
                    {/*<div className="pl10 border_bottom f14" style={{height:30,lineHeight:'30px'}}>
                     <span>规格:</span><span>72盒/箱</span>
                     </div>*/}
                    <Split />

                    <Tabscontrol
                        style={{backgroundColor:'#fff'}}
                    >
                        <div name="商品介绍">
                            {this.commodityIntroduction()}
                        </div>
                        <div name="商品参数">
                            {this.showGoodsParams()}
                        </div>
                        <div name="评论">
                            {this.showGoodsRemark()}
                        </div>

                    </Tabscontrol>
                </div>
                <div className="height3 width100 pf bottom0  padd10 border_top bkg_color z_index flex flex-pack-justify">
                    <div
                        onClick={()=>this.adShopCarOrToPay(2)}
                        className="width100 height100"
                    >
                        <button className="border_4 bgk_lv width100 height100 f16 colorfff borderno">
                            立即购买
                        </button>
                    </div>
                </div>
                {/*选择商品属性*/}
                {this.state.isShow?
                    <GoodsPopup
                        image = {goodsDetails.IMAGE}
                        attr = {this.state.attributeList}
                        closePopUp = {()=>this.setState({isShow:false})}
                        ensurePress = {(ids,count,typeParam)=>this.addShopCar(ids,count,typeParam)}
                        isOnly = {this.state.type?true:false}
                        price = {goodsDetails.CURRENT_PRICE}

                    />
                    :null
                }
                <div className="goodBottom width100"></div>
            </section>


        );
    }
}
